<template>
	<view class="input-box">
		<picker :disabled="disabled" mode="multiSelector" @change="MultiChange" @columnchange="MultiColumnChange" :range="multiArray" range-key="label" :value="defaultValue">
			<view class="picker" :class="disabled ? 'text-grey' : ''">
				<text class="text-grey" style="font-size: 12px" v-if="!chooseObj.value">请选择</text>
				{{ chooseObj.label }}&nbsp;
			</view>
		</picker>
	</view>
</template>
<script>
import dayjs from 'dayjs';
const now = dayjs();

export default {
	props: {
		// 绑定值，可以是主键ID或者对象（对象至少需要包含主键id，如果包含了id，fullName则程序会减少一步找数据时间）
		modelValue: {
			type: [Object, String],
			default() {
				return '';
			}
		},
		// 禁用
		disabled: {
			type: Boolean,
			default() {
				return false;
			}
		}
	},
	emits: ['update:modelValue', 'change'],
	watch: {
		modelValue: {
			handler(val, oldVal) {
				if (!val) {
					return;
				}
				if (val === this.chooseObj) {
					return;
				}
				if (val.value) {
					const monthDay = dayjs(val.value);
					let month = monthDay.month() + 1;
					month = month < 10 ? '0' + month : month;
					this.chooseObj = {
						label: `${monthDay.year()}年${month}月`,
						value: `${monthDay.year()}-${month}`,
						year: monthDay.year(),
						month: monthDay.month(),
						monthDayStart: monthDay.format('YYYY-MM-01'),
						monthDayEnd: dayjs(monthDay.format('YYYY-MM-01')).add(1, 'month').subtract(1, 'day').format('YYYY-MM-DD')
					};
					return;
				}
				if (val.monthDayStart && val.monthDayEnd) {
					const monthDay = dayjs(val.monthDayStart);
					let month = monthDay.month() + 1;
					month = month < 10 ? '0' + month : month;
					this.chooseObj = {
						label: `${monthDay.year()}年${month}月`,
						value: `${monthDay.year()}-${month}`,
						year: monthDay.year(),
						month: monthDay.month(),
						monthDayStart: val.monthDayStart,
						monthDayEnd: val.monthDayEnd
					};
				}
			},
			immediate: true
		}
	},
	data() {
		return {
			multiArray: [],
			index: 0,
			multiIndex: 0,
			chooseObj: {},
			defaultValue: []
		};
	},
	created() {
		this.multiArray = [];
		this.loadData();
	},
	methods: {
		MultiChange(e) {
			const { value } = e.detail;

			const chooseValue = [];
			for (var i = 0; i < value.length; i++) {
				chooseValue.push(this.multiArray[i][value[i]]);
			}
			const nowMonthStart = dayjs(`${chooseValue[0]}-${chooseValue[1]}-01`);
			this.chooseObj = {
				label: `${chooseValue[0]}年${chooseValue[1]}月`,
				value: `${chooseValue[0]}-${chooseValue[1]}`,
				year: chooseValue[0],
				month: chooseValue[1],
				monthDayStart: nowMonthStart.format('YYYY-MM-DD'),
				monthDayEnd: nowMonthStart.add(1, 'month').subtract(1, 'day').format('YYYY-MM-DD')
			};
			console.log(this.chooseObj);
			this.$emit('update:modelValue', this.chooseObj);
			this.$emit('change', this.chooseObj);
		},
		MultiColumnChange(e) {},

		loadData() {
			const nowYear = now.year();
			// 年
			const array = [];
			for (var i = nowYear - 50; i <= nowYear + 50; i++) {
				array.push(i);
			}
			this.multiArray.push(array);

			// 月
			const month = [];
			for (var i = 1; i <= 12; i++) {
				const value = i < 10 ? '0' + i : i;
				month.push(value);
			}
			this.multiArray.push(month);
			this.defaultValue.push(50, month.indexOf(now.format('MM')));
		}
	}
};
</script>
<style scoped>
.input-box {
	position: relative;
	overflow: hidden;
	flex: 1;
	line-height: 1;
	font-size: 14px;
	flex-direction: row;
	align-items: center;
	border: 1px solid #dcdfe6;
	border-radius: 4px;
	padding: 12px 15px;
}
.text-grey {
	color: #999;
}
</style>